<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Young Man的主页</title>
  <link rel="shortcut icon" href="./img/bitbug_favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  
</head>

<body>

  <div class="container">

    <header>
      <ul class="clearfix w">
        <li><a href="#" class="header-show">首 页</a></li>
        <li><a href="#">框 架</a></li>
        <li><a href="#">论 坛</a></li>
        <li><a href="#">教 程</a></li>
        <li><a href="#">插 件</a></li>
        <li><a href="#">留 言</a></li>
        <div class="search-left fr top-search">
          <form>
            <input type="text" placeholder="I Want To You Soul" class="input-search" >
            <button onclick="search()" class="search-btn"> 搜索 </button>
          </form>
        </div>
      </ul>
    </header>
        
    <!-- 搜索框 -->
    <div class="search w">
      <div class="search-left fr">
        <form>
          <input type="text" placeholder="I Want To You Soul" class="input-search ipt-search" >
          <button onclick="searchbtn()" class="search-btn"> 搜索 </button>
        </form>
      </div>

      <div class="login-right clearfix fl">
        <ul>
          <li><a href="#">登录</a></li>
          <li><a href="#">注册</a></li>
          <li><a href="#">留言</a></li>
        </ul>
      </div>
    </div>

    <!-- 主体内容 -->
    <main>
      <ul class="w clearfix">
        <li><a href="https://www.zhihu.com/search?type=content&q=%E5%89%8D%E7%AB%AF" target="_blank"><img
              src="https://static.zhihu.com/static/favicon.ico">知乎</a></li>
        <li><a href="https://www.w3school.com.cn/" target="_blank"><img src="./img/logo-16-red.png" alt="">W3school</a></li>
        <li><a href="https://zh.javascript.info/" target="_blank"><img src="./img/JavaScriptn.png" alt="">JavaScript</a></li>
        <li><a href="http://www.jq22.com/" target="_blank"><img src="./img/插件.png" alt="">Jquery.cl</a></li>
        <li><a href="http://nodejs.cn/api/net.html#net_class_net_server" target="_blank"><img src="./img/node.png" alt="">Node.js</a>
        </li>
        <li><a href="https://cn.vuejs.org/v2/guide/" target="_blank"><img src="./img/Vue-log.png" alt="">Vue.js</a></li>
        <li><a href="https://react.docschina.org/tutorial/tutorial.html" target="_blank"><img src="./img/logo-180x180.png"
              alt="">React</a></li>
        <li><a href="https://angular.cn/start/routing" target="_blank"><img src="./img/favicon-16x16.png" alt="">Angular</a></li>
        <li><a href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank"><img src="./img/element.png" alt="">Element</a>
        </li>
        <li><a href="https://www.echartsjs.com/zh/index.html" target="_blank"><img src="./img/favicon.png" alt="">ECharts</a></li>
        <li><a href="https://gitee.com/" target="_blank"><img src="./img/码云3.png" alt="">Gitee</a></li>
      </ul>
    </main>

    <div class="product w">
      <div class="p-left fl">
        <!-- 上面个人介绍 -->
        <div class="fl-top">
          <h1>About Me</h1>
          <div class="line"></div>
          <p><span>籍贯:</span>河南</p>
          <p><span>邮箱:</span>940144133@qq.com</p>
          <p><span>爱好:</span>健身、做饭、敲代码</p>
          <p><span>毕业院校:</span>九年义务教育</p>
          <p><span>联系方式:</span>15836611174</p>
          <p>@Welcome to use</p>
        </div>
                  <!-- 下面链接推荐 -->
        <div class="fl-top-two">
          <h1>My Favorite</h1>
          <div class="line"></div>
          <ul>
            <li><a href="https://www.babeljs.cn/" target="_blank"><img src="./img/babel.png" alt="">Babel</a></li>
            <li><a href="https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96" target="_blank"><img src="./img/Vue-log.png" alt="">V-router</a></li>
          </ul>
        </div>

      </div>

      <!-- 主体内容 -->
      <div class="p-content">
         <h2>寻思啥呢</h2>
         <p>你在想碧池</p>
         <h2>支付宝转账给我</h2>
         <p>qq940144133 加我好友发红包</p>
         <img src="./img/原型6.png" alt="">
      </div>
      <!-- 右侧内容 -->
      <div class="p-right fr">
        <!-- 疑难杂症 -->
        <!-- <h1>疑难杂症</h1> -->
        <h1>Self-Knotty</h1>
          <div class="line"></div>
        <ul>
          <li><a href="https://blog.csdn.net/qq_36663202/article/details/89075765" target="_blank"><img src="./img/csdn.ico" alt="">Number,null,undefined转换规则</a></li>

          <li><a href="https://blog.csdn.net/itcast_cn/article/details/82887895" target="_blank"><img src="./img/csdn.ico" alt="">js面试题大坑——隐式类型转换</a></li>

          <li><a href="https://blog.csdn.net/gkmmg/article/details/69554378"><img src="./img/csdn.ico" alt="">防止按钮被快速多次点击,防止多次提交</a></li>

          <li><a href="https://www.cnblogs.com/lsy0403/p/5918156.html"><img src="./img/博客园.ico" alt="">javascript 的逻辑中断（短路操作）</a></li>

          <li><a href="https://www.cnblogs.com/jpfss/p/9842317.html"><img src="./img/博客园.ico" alt="">两个字符串比较大小</a></li>

          <li><a href="https://www.cnblogs.com/chinabin1993/p/9848720.html"><img src="./img/博客园.ico" alt="">五分钟搞懂Vuex</a></li>
          
          <li><a href="https://www.cnblogs.com/telwanggs/p/7736454.html"><img src="./img/博客园.ico" alt="">css3 box-shadow阴影(外阴影与外发光)讲解</a></li>
        </ul>
      </div>
    </div>

  </div>
  <!-- <script src="./js/fairyDustCursor.js"></script>  -->
  <script src="./js/jquery.js"></script>
  <script src="./js/index.js"></script>
  <script>
    function search() {
      // location.href="http://www.baidu.com/s?wd="+$("#input").val();
      window.open("http://www.baidu.com/s?wd=" + $(".input-search").val())
      // $(".input-search").val('')
    }
    function searchbtn() {
      // location.href="http://www.baidu.com/s?wd="+$("#input").val();
      window.open("http://www.baidu.com/s?wd=" + $(".ipt-search").val())
      $(".ipt-search").val('')
    }

    $('header .w').on('click','a',function () {
      $(this).addClass('header-show').parent().siblings().children().removeClass('header-show ')
    })


   

  </script>
</body>

</html>